<template>
	<view class="uni_box">
		<navbar :title='title'>
		</navbar>
		<view class="content">
			    <!-- <view class="contenthead">
					<image src="/static/fugui.png" mode="" class="yanxuan right"/>
					<text>{{yuyan}}</text>
					<image src="/static/xia.png" mode="" class="xia"/>
				</view> -->
				<view class="logoview">
					<image src="/static/newlogo.png" mode="" class="lotou"/>
				</view>
				<view class="nview">
					<view class="listitem">
						<u-input v-model="surname" style="width:78%;" type="text" :placeholder='xs' />
					</view>
					<view class="listitem">
						<u-input v-model="name" style="width:78%;" type="text" :placeholder='mz' />
					</view>
				</view>
				<view class="listitem">
					<u-input v-model="email" style="width:78%;" type="text" :placeholder='yx' />
				</view>
				<view class="listitem">
					<u-input class="iteminput" v-model="code" type="text" :placeholder='youyan' />
					<!-- <input class="iteminput" type="number" v-model="code" placeholder="请输入短信验证码"> -->
					<text class="fayan" v-if="isTimer">{{time}}s</text>
					<!-- <yunpian style="margin-left:auto" v-else-if="!isTimer&&phone" @click="handleCaptcha"></yunpian> -->
					<text class="fayan" v-else @click="lockSheet">{{$t('common.fayan')}}</text>
				</view>
				<view class="listitem">
					<u-input v-model="phone" style="width:78%;" type="text" :placeholder='shuphone' />
				</view>
				<view class="listitem">
					<!-- <input class="iteminput" :type="iseyes ? type_number : type_password" v-model="password" placeholder="请设置新密码"> -->
					<u-input class="iteminput"  v-model="password" :type="type" :border="border" :password-icon="passwordIcon" :placeholder='dengmi' />
				</view>
				<view class="listitem">
					<u-input class="iteminput" v-model="confirm_password" :type="type" :border="border" :password-icon="passwordIcon" :placeholder='dengmitwo' />
				</view>
				<view class="listitem" style="margin-bottom: 20rpx;">
					<!-- <input class="iteminput" type="number" v-model="invitation_code" placeholder="请输入您的邀请码"> -->
					<u-input class="iteminput" v-model="shop_name" type="text" :placeholder='dianpu' />
				</view>
				<text class="yiyou">{{$t('common.yiyou')}}，<text class="yiyoutext" @click="router('/pages/login/login')">{{$t('common.qulogin')}}</text></text>
				<view class="bot">
					<view class="botbtn">
						<view class="btnbgview" @click="register">
							{{$t('common.zhuce')}}
						</view>
					</view>
				</view>
				<view class="item_desc">
				<!-- <u-checkbox 
					@change="checkboxChange" 
					v-model="checked"
					active-color='#2A64E4'
					icon-size='10'
					label-size='24'
					size='26'
				>
				<view class="desctext">
					{{$t('common.loginmiao')}}
					<text style="color: #2A64E4;" @click.stop="routerTo('/pages/my/yhXieyi?key=agreement')">《{{$t('common.yhxy')}}》</text>{{$t('common.and')}}
					<text style="color: #2A64E4;" @click.stop="routerTo('/pages/my/yhXieyi?key=register')">《{{$t('common.ysxy')}}》</text>
				</view>
				</u-checkbox> -->
			</view>
			<!-- </view> -->
		</view>
		<yidunCaptcha ref="captcha" :isSense="false" @verify="handleCaptcha"></yidunCaptcha>
		<u-toast ref="uToast" />
		<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
		<u-action-sheet :list="yuyanlist" v-model="showyuyan" @click="actionSheetCallbackyuyan"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: true,
				phone: "",
				
				
				
				pay_password: "",
				payconfirm_password: "",
				timer: null,
				time: 60,
				isTimer: false,
				
				checked: false,
				iseyes:false,
				iseyestwo:false,
				type_number: "number",
				type_password: "password",
				type: 'password',
				passwordIcon: true,
				border: false,

				email:'',
				code: "",
				name:"",
				surname:"",
				phone:'',
				password: "",
				confirm_password: "",
				shop_name: "",
				showyuyan:false,
				show: false,
			}
		},
		computed: {
			// 正确用法
			title(){
				return this.$t('common.loginzc')
			},
			yuyan(){
				return this.$t('common.zh')
			},
			actionSheetList(){
				let datas =[
					{
						text: this.$t('common.youone')
					},
					{
						text: this.$t('common.youtwo')
					}
				]
				return datas
			},
			yuyanlist(){
				let datas =[
					{
						text: this.$t('common.zh')
					},
					{
						text: this.$t('common.en')
					}
				]
				return datas
			},
			// 正确用法
			actext:{
				get(){
                    return this.$t('common.kexuan')
                },
                set(v) {
                    return v
                }
			},
			yx(){
				return this.$t('i.yx')
			},
			xs(){
				return this.$t('i.xs')
			},
			mz(){
				return this.$t('i.mz')
			},
			youyan(){
				return this.$t('i.youyan')
			},
			shuphone(){
				return this.$t('i.shuphone')
			},
			dengmi(){
				return this.$t('i.dengmi')
			},
			dengmitwo(){
				return this.$t('i.dengmitwo')
			},
			dianpu(){
				return this.$t('i.dianpu')
			},
		},
		methods: {
			async lockSheet() {
				let email = this.email;
				if (!email) {
					this.$refs.uToast.show({
						title: this.$t('i.yx'),
						type: "error"
					})
					return
				};
				// this.$refs.captcha.verify();
				this.isTimer = true;
				this.timer = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.isTimer = false;
						this.time = 60;
						clearInterval(this.timer);
					};
				}, 1000);
				let res = await this.$u.api.send({
					email: this.email,
					scene: "register"
				});
				// console.log(res)
			},
			async handleCaptcha(validate) {
				this.isTimer = true;
				this.timer = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.isTimer = false;
						this.time = 60;
						clearInterval(this.timer);
					};
				}, 1000);
				let res = await this.$u.api.smsSend({
					phone: this.phone,
					scene: "register",
					authenticate:validate.authenticate,
					token:validate.token
				});
			},
			router(url) {
				uni.navigateTo({
					url
				})
			},
			eyesClick(e){
				if(e == 1){
					this.iseyes = !this.iseyes
				}else if(e ==2){
					this.iseyestwo = !this.iseyestwo
				}
			},
			async register() {
				if (!this.surname) {
					this.$u.toast(this.$t('i.xs'));
					return false;
				}
				if (!this.name) {
					this.$u.toast(this.$t('i.mz'));
					return false;
				}
				if (!this.email) {
					this.$u.toast(this.$t('i.yx'));
					return false;
				}
				if (!this.code) {
					this.$u.toast(this.$t('i.youyan'));
					return false;
				}
				if (!this.phone) {
					this.$u.toast(this.$t('i.shuphone'));
					return false;
				}
				if (!this.password) {
					this.$u.toast(this.$t('i.dengmi'));
					return false;
				}
				if (!this.shop_name) {
					this.$u.toast(this.$t('i.dianpu'));
					return false;
				}
				if (this.password != this.confirm_password) {
					this.$refs.uToast.show({
						title: this.$t('i.nyz'),
						type: "error"
					})
					return false;
				};
				// if (this.password.length < 6 || this.confirm_password.length < 6) {
				// 	this.$refs.uToast.show({
				// 		title: "密码长度不够",
				// 		type: "error"
				// 	})
				// 	return false;
				// }
				// if (!this.checked) {
				// 	this.$u.toast("请先阅读《用户协议》和《隐私政策》");
				// 	return false;
				// }
				let data = await this.$u.api.register({
					email: this.email,
					code: this.code,
					password: this.password,
					confirm_password: this.confirm_password,
					surname: this.surname,
					name: this.name,
					shop_name: this.shop_name,
					phone: this.phone,
				});
				this.$store.commit('changeToken', data.token);
				this.$u.toast(this.$t('i.zcheng'));
				
				setTimeout(() => {
					// uni.switchTab({
					// 	url: '/pages/tabbar/Tabhome'
					// })
					this.routerTo('/pages/tabbar/Tabhome')
				}, 1000);
				// this.$u.toast("注册成功");
				// setTimeout(() => {
				// 	this.routerTo('/pages/login/login')
				// }, 1000);
			},
			routerTo(url) {
				uni.redirectTo({
					url
				})
			},
			actionSheetCallbackyuyan(e){
				this.yuyan = this.yuyanlist[e].text
				if(e == 0){
					this.switchLang('zh')
				}else if(e == 1){
					this.switchLang('en')
				}
			},
			actionSheetCallback(e){
				console.log(e)
				this.actext = this.actionSheetList[e].text
				if(this.actionSheetList[e].text == '163邮箱'){
					this.email = this.email+'@163.com'
				}else if(this.actionSheetList[e].text == 'QQ邮箱'){
					this.email = this.email+'@qq.com'
				}
			},
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #fff;
}
.content {
padding: 30rpx 35rpx 50rpx;
box-sizing: border-box;
    .contenthead{
		display: flex;
		flex-direction: row;
		align-items: center;
		.right{
			margin-left: auto;
		}
		.yanxuan{
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
		.xia{
			width: 17rpx;
			height: 13rpx;
			margin-left: 8rpx;
			position: relative;
			top: 5rpx;
		}
		.ltext{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

	}
	.lotou{
		width: 150rpx;
		height: 150rpx;
		margin: 30rpx 0 60rpx;
	}
	.ltext{
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		display: block;
		margin-bottom: 70rpx;
	}
	.zhangnavitem{
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.xian{
			width: 100%;
			height: 4rpx;
			background: #999999;
		}
		.tit{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			display: inline-block;
			margin-bottom: 8rpx;
		}
		
	}
	.active .xian{
		background: #73FAB5;
	}
	.active .tit{
		color: #73FAB5;
		font-weight: bold;
	}
}
.listitem{
	width: 100%;
	height: 92rpx;
	border: 1rpx solid #C8C9D1;
	border-radius: 10rpx;
	padding: 0 35rpx;
	margin-bottom: 28rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.qu{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333;
		margin-right: 20rpx;
	}
	.iteminput{
		font-size: 28rpx;
		color: #333;
		width: 70%;
		height: 70%;
		background: none;
		border: none;
	}
	.fayan{
		margin-left: auto;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #8A1596;
	}
	.yanright{
		margin-left: auto;
		display: flex;
		align-items: center;
	}
	.iteminput:active{
		border: none;
	}
	.iteminput:focus {
	    outline:none;
	    border: none;
	}
	.yan{
		// margin-left: auto;
		width: 44rpx;
		height: 44rpx;
	}
	.youitem{
		display: flex;
		flex-direction: row;
		width: 22%;
		height: 70%;
		justify-content: flex-end;
		align-items: center;
		.youitems{
			// width:50%;
			padding: 0px 8px;
			background: #2A64E4;
			color: #fff;
			font-size: 11px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border-radius: 7px;
			margin-left: 5px;
		}
		.xia{
			width:17rpx;
			height:13rpx;
			margin-left:10rpx;
		}
		.youtext{
			color:#333;
			font-size:25rpx;
		}
	}
}
.nview{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	.listitem{
		width: 48%;
	}
}
.zhuce{
	display: flex;
	flex-direction: row;
	
	.zhuceitem{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999;
	}
	.zhuces{
		color: #73FAB5;
	}
	.wangji{
		margin-left: auto;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
}
// 按钮样式开始
.bot{
	margin-top: 100rpx;
	.botbtn{
		width: 100%;
		height: 88rpx;
		position: relative;
		background: #8A1596;
	    border-radius: 10rpx;
		.btnbg{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 0;
		}
		.btnbgview{
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #fff;
		}
	}
}
// 按钮样式结束
.item_desc{
	margin-top: 36rpx;
	display: flex;
	align-items: center;
	.desctext{
		display: flex;
		align-items: center;
	}
}
.yiyou{
	display: block;
	text-align: right;
	font-size: 26rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999;
	.yiyoutext{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8A1596;
	}
}
.logoview{
		display: flex;
		align-items: center;
		justify-content: center;
		margin:40rpx 0;
	}
</style>
